<!-- 员工佣金发放总表-->
<template>
    <div class="groupAwardsTable">
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="报表名称：">
                <el-input placeholder="请输入报表名称" v-model.trim="ruleForm.reportName" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="报表名称" prop="reportName" align="center"></el-table-column>
            <el-table-column label="月份" prop="period" align="center"></el-table-column>
            <el-table-column label="营收业绩（元）" prop="revenue" align="center" :formatter="initCash"></el-table-column>
            <el-table-column label="成交套数" prop="turnover" align="center" :formatter="initCash2"></el-table-column>
            <el-table-column label="计提规则" align="center">
                <template slot-scope="scope"><a href="javascript:;;" @click="viewDialog(scope.row)">查看</a></template>
            </el-table-column>
            <el-table-column label="团奖支出" prop="expendAmount" align="center">
                <template slot-scope="scope"><a href="javascript:;;" @click="seehander(scope.row)">{{scope.row.expendAmount | initCash}}</a></template>
            </el-table-column>
        </el-table>

        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="ruleForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ruleForm.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
        <el-dialog
                title="查看计提规则"
                :visible.sync="dialogVisible"
                width="700px">
            <el-table :data="dialogList.list" border>
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column label="楼盘名称" prop="devName" align="center"></el-table-column>
                <el-table-column label="计提节点" prop="calculationNode" align="center">
                    <template slot-scope="scope">{{["交易及佣金", "回款"][scope.row.calculationNode-2]}}</template>
                </el-table-column>
                <el-table-column label="计提方式" prop="extractCategory" align="center">
                    <template slot-scope="scope">{{["套*金额", "基数*比例"][scope.row.extractCategory-1]}}</template>
                </el-table-column>
                <el-table-column label="计提基数/比例" prop="extractProportion" align="center">
                    <template slot-scope="scope">
                        <template style="text-decoration: none" v-if="scope.row.extractCategory === 1">{{scope.row.extractProportion}}元/套</template>
                        <template style="text-decoration: none" v-else>基数*{{scope.row.extractProportion}}</template>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagebar">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next"
                        :current-page.sync="dialogList.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="dialogList.pageSize"
                        @size-change="dialogHandleSizeChange"
                        @current-change="dialogHandleCurrentChange"
                        :total="dialogList.totalSize">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import api from '@/api/apiPath'

    export default {
        name: "groupAwardsTable",
        title:'团奖结算表',
        data() {
            return {
                ruleForm: {
                    reportName: undefined,
                    pageNum: 1,
                    pageSize: 10,
                },
                totalSize: 0,
                tableData: [],
                dialogVisible: false,
                dialogList: {
                    list: [],
                    pageNum: 1,
                    pageSize: 10,
                    period: "",
                    totalSize: 0
                }
            }
        },

        methods: {
            initCash(row, column, cellValue) {
                if (cellValue === 0) {
                    return "0.00"
                } else {
                    return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }
            },
            initCash2(row, column, cellValue) {
                if (cellValue === 0) {
                    return "0"
                } else {
                    return cellValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }
            },
            searchList() {
                this.ruleForm.pageNum = 1
                this.getlist()
            },
            handleCurrentChange(num) {
                this.ruleForm.pageNum = num
                this.getlist()
            },
            handleSizeChange(val) {
                this.ruleForm.pageSize = val
                this.getlist();
            },
            dialogHandleCurrentChange(num) {
                this.dialogList.pageNum = num
                this.getGroupAwardsTableByDev()
            },
            dialogHandleSizeChange(val) {
                this.dialogList.pageSize = val
                this.getGroupAwardsTableByDev();
            },
            seehander(val) {
                this.$router.push({path: "./groupAwardsTableDetail", query: {period: val.period}})
            },
            getlist() {
                this.axios.post(api.groupAwardsTableByMonth, this.ruleForm).then((res) => {
                    this.tableData = res.data.data.list;
                    this.totalSize = res.data.data.total;
                })
            },
            viewDialog(row) {
                console.log(row);
                this.dialogList.pageNum = 1;
                this.dialogList.pageSize = 10;
                this.dialogList.period = row.period;
                this.getGroupAwardsTableByDev()
            },
            getGroupAwardsTableByDev() {
                this.axios.post(api.groupAwardsTableByDev, {
                    period: this.dialogList.period,
                    pageSize: this.dialogList.pageSize,
                    pageNum: this.dialogList.pageNum,
                }).then((res) => {
                    this.dialogVisible = true;
                    this.dialogList.list = res.data.data.list;
                    this.dialogList.totalSize = res.data.data.total;
                })
            }
        },
        filters: {
            initCash(cellValue) {
                if (cellValue === 0) {
                    return "0.00"
                } else {
                    return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }
            }
        },
        activated(){
            this.searchList()
        },
        created() {
            this.getlist()
        }
    }

</script>

<style lang="stylus" scoped>
    .lock {
        color: #cccccc;
        cursor: not-allowed;
    }
</style>
